<template>
  <div class="center">
    <div class="search clearfix">
      <Search @childFn="parentFn" />
      <el-select
        v-model="faultstatus"
        :clearable="true"
        :filterable="true"
        placeholder="请选择故障状态"
        :style="{ width: '200px' }"
      >
        <el-option
          v-for="item in faultstatuslist"
          :label="item.label"
          :key="item.index"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="sitename"
        :clearable="true"
        :filterable="true"
        placeholder="请输入站点名称"
        :style="{ width: '200px' }"
      ></el-input>
      <el-button type="primary" @click="getfault">查询</el-button>
    </div>
    <div class="table">
      <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="故障分析">
      <el-table
        :data="tableData"
        class="customer-table"
        height="71.5vh"
        :header-cell-style="headClass"
      >
        <el-table-column type="index" align="center" width="100">
        </el-table-column>
        <el-table-column
          prop="siteNo"
          label="站点编号"
          align="center"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="siteName"
          label="站点名称"
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column prop="status" label="故障状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 'warning'">故障中</span>
            <span v-if="scope.row.status == 'closed'">已关闭</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="故障时间"
          align="center"
        ></el-table-column>
        <el-table-column prop="closedTime" label="关闭时间" align="center">
        </el-table-column>
        <el-table-column label="故障详情" align="center">
          <template slot-scope="scope">
            <span
              @click="handle(scope.row)"
              style="cursor: pointer; color: rgba(0, 255, 255, 1)"
              >故障详情</span
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        @prev-click="prevclick"
        @next-click="nextclick"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total,prev, pager, next"
        :total="total"
      >
      </el-pagination>
      </dv-border-box-11>
    </div>
    <!-- 故障详情 -->
    <el-dialog
      class="table"
      style="margin: 0"
      :title="siteName"
      :inline="true"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
    >
      <el-table
        :data="faultinfo"
        height="400"
        class="customer-table"
        :header-cell-style="headClass"
      >
        <el-table-column
          prop="aisleNo"
          label="故障通道"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="reason"
          label="故障原因"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="remark"
          label="故障描述"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="故障状态"
          align="center"
          width="100"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status == 'warning'">故障中</span>
            <span v-if="scope.row.status == 'closed'">已关闭</span>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="故障类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 'HEAT_UP'">升温过快</span>
            <span v-if="scope.row.type == 'CONTINUOUS_NULL'"
              >连续20条数据测温点为空</span
            >
            <span v-if="scope.row.type == 'THAN_NULL'"
              >超过12个通道测温点数据为空</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="故障时间"
          align="center"
        ></el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange1"
        @prev-click="prevclick1"
        @next-click="nextclick1"
        :current-page="currentPage1"
        :page-size="pagesize1"
        layout="total,prev, pager, next"
        :total="total1"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import Search from "../../common/select";

export default {
  components: {
    Search,
  },
  watch: {
    breakdownId() {
      this.currentPage1 = 1;
      this.pagesize1 = 10;
    },
    currentPage(){
      this.getfault();
    }
  },
  data() {
    return {
      faultstatus: "",
      faultstatuslist: [
        {
          label: "正在故障",
          value: "warning",
        },
        {
          label: "故障关闭",
          value: "closed",
        },
      ],
      sitename: "",
      siteName: "",
      currentPage: 1,
      pagesize: 10,
      currentPage1: 1,
      pagesize1: 10,
      total: 0,
      total1: 0,
      breakdownId: "",
      message: {},
      tableData: [],
      dialogFormVisible: false,
      faultinfo: [],
    };
  },
  methods: {
    //接收子组件传的省市区对象
    parentFn(payload) {
      this.message = payload;
    },
    headClass() {
      return "background-color: transparent;color:#fff;font-weight:bold;";
    },
    //获取故障列表
    getfault() {
      let params = {
        provinceCode: this.message.provincecode || "",
        cityCode: this.message.citycode || "",
        districtCode: this.message.districtcode || "",
        status: this.faultstatus || "",
        siteName: this.sitename || "",
        page: {
          pageNo: this.currentPage,
          pageSize: this.pagesize,
        },
      };
      this.$http
        .post("/site/breakdown/list", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.total = res.data.b.total;
            this.tableData = res.data.b.records;
          }
        })
        .catch((err) => {});
    },
    getfaultlist() {
      let params = {
        breakdownId: this.breakdownId,
        page: {
          pageNo: this.currentPage1,
          pageSize: this.pagesize1,
        },
      };
      this.$http.post("/site/breakdown/aisles/list", params).then((res) => {
        if (res.data.h.code == 0) {
          this.dialogFormVisible = true;
          this.total1 = res.data.b.total;
          this.faultinfo = res.data.b.records;
        }
      });
    },
    handle(row) {
      this.siteName = row.siteName;
      this.breakdownId = row.id;
      this.getfaultlist();
    },
    //上一页
    prevclick() {
      this.currentPage--;
    },
    prevclick1() {
      this.currentPage1--;
      this.getfaultlist();
    },
    //下一页
    nextclick() {
      this.currentPage++;
    },
    nextclick1() {
      this.currentPage1++;
      this.getfaultlist();
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleCurrentChange1(val) {
      this.currentPage1 = val;
      this.getfaultlist();
    },
  },
  mounted() {
    this.getfault();
  },
};
</script>
<style scoped>
.center {
  position: relative;
}
.search {
  padding-left: 10px;
  box-sizing: border-box;
  display: inline-block;
}
.search .el-select {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.search .el-input {
  float: left;
  width: 150px;
  margin-right: 10px;
}
.table {
  box-sizing: border-box;
  height:83vh;
}
.el-pagination {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-dialog {
  height: 50%;
}
</style>
<style>
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
</style>